<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_slot</title>
</head>
<!--
    slot: 子组件中的提供给父组件使用的一个占位符,所以是定义在【子组件】里的,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签.
        1. 只有当子组件里定义了插槽,在父组件里写的东西才会生效;
        2. 子组件里写了一个 slot,父组件里写了 dom 结构,就会把 slot 替换;有几个 slot 就会被替换几次;
        3. slot 标签里也可以填写任意内容,它里面写的内容是默认的内容;若替换它的结构里有内容,就会替换若没有则取 slot 里默认的内容;
-->
<body>
    <div id="app">
        <cpn>
            <h3>xxxppp</h3>
            <h3>wewew</h3>
            <i slot="title">我是被修改的标题...</i>
        </cpn>
    </div>
</body>

<template id="aa">
    <div>
        <h3>我是子组件标题...</h3>
        <slot><h1>我是插槽里默认的内容...</h1></slot>
        <!--给插槽添加 name 属性,就是取名字,这种叫【具名插槽】-->
        <slot name="title">我是插槽里默认的标题...</slot>
    </div>
</template>

<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        components: {
            'cpn': {
                template: '#aa'
            }
        }
    })
</script>
</html>